<template>
  <div>
    <div
      class="bigbox"
      v-if="imgarr.length"
      @mouseover="mouseOver"
      @mouseleave="mouseLeave"
    >
      <div class="left" @click="prev"></div>
      <div class="content">
        <div
          v-for="(item, index) in imgarr"
          :style="config5[index]"
          :key="item.sort"
        >
          <img :src="item.bannerImg" style="width: 100%; height: 100%" />
        </div>
      </div>
      <div class="right" @click="next"></div>
    </div>
    <!-- 蓝色条子 -->
    <div class="dinx">
      <div
        :class="index == currentIndex ? 'two' : ''"
        v-for="(item, index) in imgarr"
        :key="index"
      ></div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["imgarr", "auto"],
  watch: {
    imgarr() {
      if (this.imgarr.length == 1) {
        // console.log(1);
        this.config5 = [
          {
            id: "center",
            position: "absolute",
            width: "87%",
            height: "100%",
            top: "0px",
            left: "6.5%",
            opacity: 1,
            zIndex: 4,
            borderRadius: "6px",
            transition: "1s",
            overflow: "hidden",
          },
        ];
      } else if (this.imgarr.length == 2) {
        // console.log(2);
        this.config5 = [
          {
            id: "center",
            position: "absolute",
            width: "87%",
            height: "100%",
            top: "0px",
            left: "6.5%",
            opacity: 1,
            zIndex: 4,
            borderRadius: "6px",
            transition: "1s",
            overflow: "hidden",
          },
          {
            id: "D",
            position: "absolute",
            width: "28%",
            height: "83%",
            top: "8.3%",
            left: "72%",
            opacity: 1,
            zIndex: 2,
            boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
            lineHeight: "83%",
            borderRadius: "6px",
            transition: "1s",
            overflow: "hidden",
          },
        ];
      } else if (this.imgarr.length == 3) {
        // console.log(3);
        this.config5 = [
          {
            id: "B",
            position: "absolute",
            width: "28%",
            height: "83%",
            top: "8.3%",
            left: "0",
            opacity: 1,
            zIndex: 2,
            boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
            borderRadius: "6px",
            transition: "1s",
            lineHeight: "83%",
            overflow: "hidden",
          },
          {
            id: "center",
            position: "absolute",
            width: "87%",
            height: "100%",
            top: "0px",
            left: "6.5%",
            opacity: 1,
            zIndex: 4,
            borderRadius: "6px",
            transition: "1s",
            overflow: "hidden",
          },
          {
            id: "D",
            position: "absolute",
            width: "28%",
            height: "83%",
            top: "8.3%",
            left: "72%",
            opacity: 1,
            zIndex: 2,
            boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
            lineHeight: "83%",
            borderRadius: "6px",
            transition: "1s",
            overflow: "hidden",
          },
        ];
      } else if (this.imgarr.length == 4) {
        // console.log(4);
        this.config5 = [
          {
            id: "A",
            position: "absolute",
            width: "28%",
            height: "83%",
            top: "8.3%",
            left: "0",
            opacity: 1,
            zIndex: 1,
            boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
            borderRadius: "6px",
            transition: "1s",
            lineHeight: "83%",
            overflow: "hidden",
          },
          {
            id: "B",
            position: "absolute",
            width: "28%",
            height: "83%",
            top: "8.3%",
            left: "0",
            opacity: 1,
            zIndex: 2,
            boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
            borderRadius: "6px",
            transition: "1s",
            lineHeight: "83%",
            overflow: "hidden",
          },
          {
            id: "center",
            position: "absolute",
            width: "87%",
            height: "100%",
            top: "0px",
            left: "6.5%",
            opacity: 1,
            zIndex: 4,
            borderRadius: "6px",
            transition: "1s",
            overflow: "hidden",
          },
          {
            id: "D",
            position: "absolute",
            width: "28%",
            height: "83%",
            top: "8.3%",
            left: "72%",
            opacity: 1,
            zIndex: 2,
            boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
            lineHeight: "83%",
            borderRadius: "6px",
            transition: "1s",
            overflow: "hidden",
          },
        ];
      } else if (this.imgarr.length == 5) {
        // console.log(5);
        this.config5 = [
          {
            id: "A",
            position: "absolute",
            width: "28%",
            height: "83%",
            top: "8.3%",
            left: "0",
            opacity: 1,
            zIndex: 1,
            boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
            borderRadius: "6px",
            transition: "1s",
            lineHeight: "83%",
            overflow: "hidden",
          },
          {
            id: "B",
            position: "absolute",
            width: "28%",
            height: "83%",
            top: "8.3%",
            left: "0",
            opacity: 1,
            zIndex: 2,
            boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
            borderRadius: "6px",
            transition: "1s",
            lineHeight: "83%",
            overflow: "hidden",
          },
          {
            id: "center",
            position: "absolute",
            width: "87%",
            height: "100%",
            top: "0px",
            left: "6.5%",
            opacity: 1,
            zIndex: 4,
            borderRadius: "6px",
            transition: "1s",
            overflow: "hidden",
          },
          {
            id: "D",
            position: "absolute",
            width: "28%",
            height: "83%",
            top: "8.3%",
            left: "72%",
            opacity: 1,
            zIndex: 2,
            boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
            lineHeight: "83%",
            borderRadius: "6px",
            transition: "1s",
            overflow: "hidden",
          },
          {
            id: "e",
            position: "absolute",
            width: "28%",
            height: "83%",
            top: "8.3%",
            left: "72%",
            opacity: 1,
            zIndex: 1,
            boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
            lineHeight: "83%",
            borderRadius: "6px",
            transition: "1s",
            overflow: "hidden",
          },
        ];
      } else {
        clearInterval(this.times);
      }
    },
    auto() {
      if (this.auto) {
        this.mouseOver();
      } else {
        this.mouseLeave();
      }
    },
  },
  data() {
    return {
      //轮播图片样式
      config5: [
        {
          id: "B",
          position: "absolute",
          width: "28%",
          height: "83%",
          top: "8.3%",
          left: "0",
          opacity: 1,
          zIndex: 2,
          boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
          borderRadius: "6px",
          transition: "1s",
          lineHeight: "83%",
          overflow: "hidden",
        },
        {
          id: "center",
          position: "absolute",
          width: "87%",
          height: "100%",
          top: "0px",
          left: "6.5%",
          opacity: 1,
          zIndex: 4,
          borderRadius: "6px",
          transition: "1s",
          overflow: "hidden",
        },
        {
          id: "D",
          position: "absolute",
          width: "28%",
          height: "83%",
          top: "8.3%",
          left: "72%",
          opacity: 1,
          zIndex: 2,
          boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
          lineHeight: "83%",
          borderRadius: "6px",
          transition: "1s",
          overflow: "hidden",
        },
      ],
      //
      currentIndex: 0, //当前中间imgarr数组中index
      centerInfo: 1,
    };
  },
  methods: {
    // 滑动上一个
    prev(index) {
      // this.imgarr.unshift(this.imgarr.pop());
      this.config5.push(this.config5.shift());
      this.currentIndex = this.currentIndex - 1;
      if (this.currentIndex < 0) {
        this.currentIndex = this.imgarr.length - 1;
      }
      this.centerCard();
    },
    // 滑动下一个
    next() {
      // this.imgarr.push(this.imgarr.shift());
      this.config5.unshift(this.config5.pop());
      this.currentIndex = this.currentIndex + 1;
      if (this.currentIndex > this.imgarr.length - 1) {
        this.currentIndex = 0;
      }
      this.centerCard();
      // console.log(this.currentIndex);
    },
    // 计算中间卡片信息
    centerCard() {
      this.centerInfo = this.imgarr[this.currentIndex];
      this.$emit("centerInfo", this.centerInfo);
    },
    //鼠标移入
    mouseOver() {
      clearTimeout(this.times);
    },
    //鼠标移出
    mouseLeave() {
      this.circulation();
    },
    //循环播放轮播图
    circulation() {
      this.times = setInterval(() => {
        this.next();
        // console.log('125');
      }, 2500);
    },
  },
  mounted() {
    this.centerCard();
    this.circulation();
    // console.log(this.imgarr.length);
    if (this.imgarr.length == 1) {
      // console.log(1);
      this.config5 = [
        {
          id: "center",
          position: "absolute",
          width: "87%",
          height: "100%",
          top: "0px",
          left: "6.5%",
          opacity: 1,
          zIndex: 4,
          borderRadius: "6px",
          transition: "1s",
          overflow: "hidden",
        },
      ];
    } else if (this.imgarr.length == 2) {
      // console.log(2);
      this.config5 = [
        {
          id: "center",
          position: "absolute",
          width: "87%",
          height: "100%",
          top: "0px",
          left: "6.5%",
          opacity: 1,
          zIndex: 4,
          borderRadius: "6px",
          transition: "1s",
          overflow: "hidden",
        },
        {
          id: "D",
          position: "absolute",
          width: "28%",
          height: "83%",
          top: "8.3%",
          left: "72%",
          opacity: 1,
          zIndex: 2,
          boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
          lineHeight: "83%",
          borderRadius: "6px",
          transition: "1s",
          overflow: "hidden",
        },
      ];
    } else if (this.imgarr.length == 3) {
      // console.log(3);
      this.config5 = [
        {
          id: "B",
          position: "absolute",
          width: "28%",
          height: "83%",
          top: "8.3%",
          left: "0",
          opacity: 1,
          zIndex: 2,
          boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
          borderRadius: "6px",
          transition: "1s",
          lineHeight: "83%",
          overflow: "hidden",
        },
        {
          id: "center",
          position: "absolute",
          width: "87%",
          height: "100%",
          top: "0px",
          left: "6.5%",
          opacity: 1,
          zIndex: 4,
          borderRadius: "6px",
          transition: "1s",
          overflow: "hidden",
        },
        {
          id: "D",
          position: "absolute",
          width: "28%",
          height: "83%",
          top: "8.3%",
          left: "72%",
          opacity: 1,
          zIndex: 2,
          boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
          lineHeight: "83%",
          borderRadius: "6px",
          transition: "1s",
          overflow: "hidden",
        },
      ];
    } else if (this.imgarr.length == 4) {
      // console.log(4);
      this.config5 = [
        {
          id: "A",
          position: "absolute",
          width: "28%",
          height: "83%",
          top: "8.3%",
          left: "0",
          opacity: 1,
          zIndex: 1,
          boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
          borderRadius: "6px",
          transition: "1s",
          lineHeight: "83%",
          overflow: "hidden",
        },
        {
          id: "B",
          position: "absolute",
          width: "28%",
          height: "83%",
          top: "8.3%",
          left: "0",
          opacity: 1,
          zIndex: 2,
          boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
          borderRadius: "6px",
          transition: "1s",
          lineHeight: "83%",
          overflow: "hidden",
        },
        {
          id: "center",
          position: "absolute",
          width: "87%",
          height: "100%",
          top: "0px",
          left: "6.5%",
          opacity: 1,
          zIndex: 4,
          borderRadius: "6px",
          transition: "1s",
          overflow: "hidden",
        },
        {
          id: "D",
          position: "absolute",
          width: "28%",
          height: "83%",
          top: "8.3%",
          left: "72%",
          opacity: 1,
          zIndex: 2,
          boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
          lineHeight: "83%",
          borderRadius: "6px",
          transition: "1s",
          overflow: "hidden",
        },
      ];
    } else if (this.imgarr.length == 5) {
      // console.log(5);
      this.config5 = [
        {
          id: "A",
          position: "absolute",
          width: "28%",
          height: "83%",
          top: "8.3%",
          left: "0",
          opacity: 1,
          zIndex: 1,
          boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
          borderRadius: "6px",
          transition: "1s",
          lineHeight: "83%",
          overflow: "hidden",
        },
        {
          id: "B",
          position: "absolute",
          width: "28%",
          height: "83%",
          top: "8.3%",
          left: "0",
          opacity: 1,
          zIndex: 2,
          boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
          borderRadius: "6px",
          transition: "1s",
          lineHeight: "83%",
          overflow: "hidden",
        },
        {
          id: "center",
          position: "absolute",
          width: "87%",
          height: "100%",
          top: "0px",
          left: "6.5%",
          opacity: 1,
          zIndex: 4,
          borderRadius: "6px",
          transition: "1s",
          overflow: "hidden",
        },
        {
          id: "D",
          position: "absolute",
          width: "28%",
          height: "83%",
          top: "8.3%",
          left: "72%",
          opacity: 1,
          zIndex: 2,
          boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
          lineHeight: "83%",
          borderRadius: "6px",
          transition: "1s",
          overflow: "hidden",
        },
        {
          id: "e",
          position: "absolute",
          width: "28%",
          height: "83%",
          top: "8.3%",
          left: "72%",
          opacity: 1,
          zIndex: 1,
          boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
          lineHeight: "83%",
          borderRadius: "6px",
          transition: "1s",
          overflow: "hidden",
        },
      ];
    } else {
      clearInterval(this.times);
    }
  },
  beforeDestroy() {
    clearInterval(this.times);
  },
};
</script>
<style lang="scss" scoped>
.bigbox {
  padding-top: 10px;
  width: 1300px;
  height: 430px;
  // border: 1px solid   red;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  justify-content: space-around;
  .left {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: url("./leftclick.png") no-repeat center;
    background-color: white;
    border: 1px solid skyblue;
    margin-top: 210px;
    background-size: 100%;
    transform: translateY(-50%);
  }
  .content {
    width: 1100px;
    height: 380px;
    position: relative;
  }
  .right {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: url("./rightclick.png") no-repeat center;
    background-color: white;
    background-size: 100%;
    border: 1px solid skyblue;
    margin-top: 210px;
    transform: translateY(-50%);
  }
  .left:hover {
    cursor: pointer;
  }
  .right:hover {
    cursor: pointer;
  }
}
.dinx {
  display: flex;
  justify-content: center;
  align-items: center;
  div {
    margin-right: 10px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: gray;
  }
  .two {
    transition: 1s;
    width: 48px;
    height: 13px;
    border-radius: 6px;
    background-color: #007aff;
  }
}
</style>
